// 定义ScaleLayout的构造参数类型
interface ScaleLayoutOptions {
      propName: string;
      width: number;
      height: number;
      container: HTMLElement;
      mainEl: HTMLElement;
      layerEl: HTMLElement;
      adpterClass: string;
      resizeListenter: () => void;
}


import ScaleLayout from "./scaleLayout";

class ScaleLayoutElement extends HTMLElement {
      private _width: number = 1920;
      private _height: number = 1080;
      private _propName: string = 'scale' + new Date().getTime();
      private _adpterClass: string = 'apter-area';
      private _resizeListenter: Function = () => { };
      private _container!: HTMLElement;
      private _mainEl!: HTMLElement;
      private _layerEl!: HTMLElement;
      private _scaleLayoutInstance!: ScaleLayout;

      constructor() {
            super();
            this.attachShadow({ mode: 'open' });
      }

      static get observedAttributes(): string[] {
            return ['propname', 'width', 'height', 'adpter-class', 'resize-listenter'];
      }

      connectedCallback(): void {
            this._container = document.createElement('div');
            this._mainEl = document.createElement('div');
            this._layerEl = document.createElement('div');

            // 创建ScaleLayout实例时，确保传入的参数类型正确
            this._scaleLayoutInstance = new ScaleLayout({
                  propName: this._propName,
                  width: this._width,
                  height: this._height,
                  container: this._container,
                  mainEl: this._mainEl,
                  layerEl: this._layerEl,
                  adpterClass: this._adpterClass,
                  resizeListenter: this._resizeListenter,
            } as ScaleLayoutOptions);

            this.shadowRoot!.appendChild(this._container);
      }

      disconnectedCallback(): void {
            if (this._scaleLayoutInstance) {
                  this._scaleLayoutInstance.removeListener();
            }
      }

      attributeChangedCallback(attrName: string, oldVal: string, newVal: string): void {
            switch (attrName) {
                  case 'propname':
                        this._propName = newVal;
                        this._scaleLayoutInstance.propName = newVal;
                        break;
                  case 'width':
                        this._width = parseInt(newVal, 10);
                        this._scaleLayoutInstance.width = parseInt(newVal, 10);
                        break;
                  case 'height':
                        this._height = parseInt(newVal, 10);
                        this._scaleLayoutInstance.height = parseInt(newVal, 10);
                        break;
                  case 'adpter-class':
                        this._adpterClass = newVal;
                        this._scaleLayoutInstance.adpterClass = newVal;
                        break;
                  case 'resize-listenter':
                        this._resizeListenter = newVal as unknown as Function;
                        this._scaleLayoutInstance.resizeListenter = newVal as unknown as Function;
                        break;
            }
            // 调用setScale和dealLayout来更新布局
            this._scaleLayoutInstance.dealLayout();
            this._scaleLayoutInstance.setScale();
      }
}

export default ScaleLayoutElement